body {
    background-color: #f0f0f0; /* Light gray background like the image */
}

.card {
    border: none; /* Remove default card border */
}

.form-label {
    font-weight: 500; /* Slightly bolder labels */
    font-size: 0.9rem; /* Slightly smaller labels */
    color: #333;
}

.form-control:focus {
    border-color: #86b7fe; /* Standard Bootstrap focus color */
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Standard Bootstrap focus shadow */
}

.password-hint {
    font-size: 0.8rem;
    color: #6c757d; /* Bootstrap's secondary text color */
}

/* Step Indicator Styles */
.step-indicator {
    gap: 1rem; /* Spacing between steps */
}

.step {
    display: flex;
    align-items: center;
    color: #6c757d; /* Default color for inactive steps */
    font-weight: 500;
    margin-right: auto;
}

.step-number {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px; /* Circle size */
    height: 50px; /* Circle size */
    border-radius: 50%;
    background-color: #adb5bd; /* Default gray background for numbers */
    color: white;
    font-weight: bold;
    margin-right: 8px; /* Space between number and text */
    font-size: 0.9rem;
}

/* Active Step Styles */
.step.active {
    color: #5a3c8a; /* Darker purple text for active step */
}

    .step.active .step-number {
        background-color: #9c76cd; /* Purple background for active number */
    }

/* Inactive Step Colors (matching image) */
.step:nth-child(2) .step-number {
    background-color: #428bca; /* Blue for step 2 */
}

.step:nth-child(3) .step-number {
    background-color: #d9534f; /* Red for step 3 */
}

/* Checkbox/Radio Styles - Optional minor tweaks */
.form-check-label {
    font-size: 0.9rem;
}

/* Save & Next Button */
.btn-save-next {
    background-color: #5a6268; /* Dark gray similar to image */
    border-color: #5a6268;
    color: white;
    padding: 0.5rem 1.5rem;
    font-weight: 500;
}

    .btn-save-next:hover {
        background-color: #495057;
        border-color: #495057;
        color: white;
    }

/* Adjust checkbox columns spacing on smaller screens if needed */
@media (max-width: 767px) {
    .mb-4 .row > div { /* Target columns within the checkbox section */
        margin-bottom: 1rem; /* Add space between columns when they stack */
    }
}
.breadcrumb-container {
    background-color: #e9ecef;
    padding: 1rem;
    margin-bottom: 2rem;
}

.breadcrumbs {
    margin: 0;
    font-weight: 500;
    color: #6c757d;
}

.password-change-container {
    max-width: 500px;
    margin: auto;
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.help-text {
    font-size: 0.875em;
    color: #6c757d;
}

.update-button {
    width: 100%;
}
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f8f9fa;
}
body {
    font-family: sans-serif;
    background-color: #f8f9fa; /* Optional: light background */
}

/*.container {
    background-color: #fff;*/ /* White background for content area */
    /*padding: 2rem;*/ /* Add some padding */
    /*max-width: 1140px;*/ /* Standard Bootstrap lg container width */
/*}*/

/* Breadcrumbs */
.breadcrumb-item a {
    text-decoration: none;
    color: #6c757d; /* Grey color for non-active breadcrumb links */
}

.breadcrumb-item.active {
    color: #495057; /* Darker grey for active breadcrumb */
}

/* Buttons */
.btn-bank-details {
    background-color: #ff6600; /* Reddish-pink color */
    color: white;
    font-weight: bold;
    border: none;
    padding: 0.5rem 1rem;
}

    .btn-bank-details:hover {
        background-color: #ff6600; /* Slightly darker on hover */
        color: white;
    }

.btn-update-payment {
    background-color: #d81b60; /* Magenta/Pink color */
    color: white;
    font-weight: bold;
    border: none;
    padding: 0.4rem 0.8rem;
    font-size: 0.9em; /* Slightly smaller font */
}

    .btn-update-payment:hover {
        background-color: #c2185b; /* Slightly darker on hover */
        color: white;
    }

/* Table Base Styles */
.table {
    margin-bottom: 0; /* Remove default bottom margin if inside responsive wrapper */
    font-size: 0.95em; /* Slightly adjust base font size for tables */
    border-color: #dee2e6; /* Ensure consistent border color */
}

    .table th,
    .table td {
        vertical-align: middle;
        text-align: center; /* Center align most cells */
        padding: 0.6rem; /* Adjust padding */
    }

/* Payment Schedule Table Specifics */
.payment-schedule-table thead.thead-light-purple th {
    background-color: #e6e0f5; /* Light purple */
    color: #333; /* Dark text */
    font-weight: bold;
    border-color: #d6ccef;
}

.payment-schedule-table tbody td:first-child {
    text-align: left; /* Left align the first column */
}

.payment-schedule-table .notes-cell {
    text-align: left;
    font-size: 0.9em;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.payment-schedule-table .note-asterisk {
    color: #d81b60; /* Use a distinct color for the asterisk note */
}


/* Payment Details Table Specifics */
.payment-details-table thead.thead-dark-purple th {
    background-color: #ff6600; /* Darker purple */
    color: white;
    font-weight: bold;
    border-color: white;
}

.payment-details-table tbody td:first-child {
    text-align: left; /* Left align Payment column */
}

.pro-forma-link {
    color: #0d6efd; /* Standard link blue */
    text-decoration: none;
    font-size: 0.9em;
}

    .pro-forma-link:hover {
        text-decoration: underline;
    }

.payment-details-table .total-row td {
    background-color: #f8f9fa; /* Slightly different background for total */
}

/* Responsive Wrapper */
.table-responsive {
    border: 1px solid #dee2e6; /* Add border to the wrapper for clarity */
    border-radius: 0.25rem; /* Optional: rounded corners */
}

    .table-responsive > .table {
        border: none; /* Remove table border if wrapper has one */
    }

        .table-responsive > .table > thead > tr > th:first-child,
        .table-responsive > .table > tbody > tr > td:first-child {
            border-left: none; /* Remove left border bleed */
        }

        .table-responsive > .table > thead > tr > th:last-child,
        .table-responsive > .table > tbody > tr > td:last-child {
            border-right: none; /* Remove right border bleed */
        }

        .table-responsive > .table > tbody > tr:last-child > td {
            border-bottom: none; /* Remove bottom border bleed */
        }


/*modal css*/
.breadcrumb-item a {
    text-decoration: none;
}

.btn-bank-details {
    background-color: #ff6600; /* Dull red/brown color from image */
    color: white;
    border: none;
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
}

    .btn-bank-details:hover {
        background-color: #ff6600;
        color: white;
    }


/* Payment Schedule Table */
.payment-schedule-table thead.thead-light-purple th {
    background-color: #ff6600; /* Light purple from image */
    color: white;
    text-align: center;
    vertical-align: middle;
    font-weight: normal;
    font-size: 0.95rem;
}

.payment-schedule-table td {
    font-size: 0.9rem;
    vertical-align: middle;
}

.notes-cell {
    font-size: 0.85em;
    font-style: italic;
    color: #555;
    background-color: #f8f9fa; /* Light background for notes */
}

.note-asterisk {
    /* Specific styling if needed */
}

/* Payment Details Table */
.payment-details-table thead.thead-dark-purple th {
    background-color: #ff6600; /* Darker purple from image */
    color: white;
    text-align: center;
    vertical-align: middle;
    font-weight: normal;
    font-size: 0.95rem;
}

.payment-details-table td {
    font-size: 0.9rem;
    vertical-align: middle;
    text-align: center; /* Center align content like image */
}

    .payment-details-table td:first-child {
        text-align: left; /* Left align the 'Payment' column */
    }

.pro-forma-link {
    font-size: 0.85em;
    text-decoration: none;
    display: block; /* Make it take its own line */
    margin-top: 2px;
}

    .pro-forma-link:hover {
        text-decoration: underline;
    }

.btn-update-payment {
    background-color: #a4426f; /* Purple/pinkish button color from image */
    color: white;
    font-size: 0.85em;
    padding: 0.3rem 0.6rem;
    border: none;
}

    .btn-update-payment:hover {
        background-color: #8e355f;
        color: white;
    }

.total-row {
    font-weight: bold;
    background-color: #f8f9fa; /* Light background for total */
}

    .total-row td {
        text-align: right; /* Right align totals */
    }

        .total-row td:first-child {
            text-align: left; /* Left align 'Total Amount' label */
        }


/* Modal Styling */
.modal-header {
    background-color: #e9ecef; /* Light grey header */
    border-bottom: 1px solid #dee2e6;
    padding: 0.8rem 1rem;
}

.modal-title {
    font-size: 1.1rem;
    font-weight: 500;
}

.modal-body {
    padding: 1.5rem;
}

.modal-title-main {
    font-weight: bold;
    color: #0056b3; /* Darker blue title */
    font-size: 1.25rem;
    margin-bottom: 1.5rem !important;
}

.required-field {
    color: red;
    margin-left: 2px;
    font-weight: bold;
}

.form-label {
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
    color: #495057;
}

.form-control, .form-select {
    font-size: 0.9rem;
}
/* Style date placeholder if using text input */
/* input[type="text"]#neftRtgsDate::placeholder {
    color: #999;
    font-size: 0.85rem;
} */

.btn-submit-custom {
    background-color: #f7941e; /* Custom orange */
    border-color: #f7941e;
    color: white;
    font-weight: bold;
    padding: 0.5rem 1.2rem;
}

    .btn-submit-custom:hover {
        background-color: #e68a1c; /* Darker orange on hover */
        border-color: #e68a1c;
        color: white;
    }